<template>
  <div class="panel">
    <div class="panel-logo"></div>
    <div class="panel-info">
      <div class="panel-info-title">常州化工厂有限公司</div>
      <div class="panel-info-content">
        <div class="panel-info-content-item">
          <div class="panel-info-content-item-name">待报价订单</div>
          <div class="panel-info-content-item-value">
            {{ homeData.bidding }}
          </div>
        </div>
        <div class="panel-info-content-item">
          <div class="panel-info-content-item-name">中标订单</div>
          <div class="panel-info-content-item-value">{{ homeData.win }}</div>
        </div>
        <div class="panel-info-content-item">
          <div class="panel-info-content-item-name">合同数量</div>
          <div class="panel-info-content-item-value">
            {{ homeData.finished }}
          </div>
        </div>
        <div class="panel-info-content-item">
          <div class="panel-info-content-item-name">待发货订单</div>
          <div class="panel-info-content-item-value">
            {{ homeData.unfinishedOrder }}
          </div>
        </div>
      </div>
    </div>
    <div class="panel-notice">
      <div
        :class="
          noticeStatus == 0
            ? 'panel-notice-left'
            : noticeStatus == 1
            ? 'noticePrev panel-notice-left'
            : 'noticeNext panel-notice-left'
        "
      >
        <img class="panel-notice-left-icon" src="./通知.png" />
        {{
          homeData.notice.length > 0 ? homeData.notice[noticeCurrent].name : ""
        }}
      </div>
      <img class="panel-notice-more" src="./箭头.png" />
    </div>
    <div class="panel-info">
      <div class="panel-info-title">
        待报价订单<span
          style="float: right; font-weight: 400; color: #aaa; font-size: 12px"
          @click="jumpList(0)"
          >>>更多</span
        >
      </div>
      <div class="panel-info-content">
        <div class="panel-info-content-itemFullFirstLine">
          <div class="panel-info-content-itemFullFirstLine-name">
            项目登记名称
          </div>
          <div class="panel-info-content-itemFullFirstLine-value">创建时间</div>
        </div>
        <div
          class="panel-info-content-itemFullLine"
          v-for="item in noPriceOrder"
          :key="item.id"
          @click="jumpUrl(item.url)"
        >
          <div class="panel-info-content-itemFullLine-name">
            {{ item.name }}
          </div>
          <div class="panel-info-content-itemFullLine-value">
            {{ item.dt }}
          </div>
        </div>
      </div>
    </div>
    <div class="panel-info">
      <div class="panel-info-title">
        中标订单<span
          style="float: right; font-weight: 400; color: #aaa; font-size: 12px"
          @click="jumpList(1)"
          >>>更多</span
        >
      </div>
      <div class="panel-info-content">
        <div class="panel-info-content-itemFullFirstLine">
          <div class="panel-info-content-itemFullFirstLine-name">
            项目登记名称
          </div>
          <div class="panel-info-content-itemFullFirstLine-value">创建时间</div>
        </div>
        <div
          class="panel-info-content-itemFullLine"
          v-for="item1 in win"
          :key="item1.id"
          @click="jumpUrl(item1.url)"
        >
          <div class="panel-info-content-itemFullLine-name">
            {{ item1.name }}
          </div>
          <div class="panel-info-content-itemFullLine-value">
            {{ item1.dt }}
          </div>
        </div>
      </div>
    </div>
    <div class="panel-info">
      <div class="panel-info-title">
        待发货订单<span
          style="float: right; font-weight: 400; color: #aaa; font-size: 12px"
          @click="jumpList(2)"
          >>>更多</span
        >
      </div>
      <div class="panel-info-content">
        <div class="panel-info-content-itemFullFirstLine">
          <div class="panel-info-content-itemFullFirstLine-name">物料名称</div>
          <div class="panel-info-content-itemFullFirstLine-value">交货时间</div>
        </div>
        <div
          class="panel-info-content-itemFullLine"
          v-for="item2 in unSendOrder"
          :key="item2.id"
          @click="jumpUrl(item2.url)"
        >
          <div class="panel-info-content-itemFullLine-name">
            {{ item2.name }}
          </div>
          <div class="panel-info-content-itemFullLine-value">
            {{ item2.dt }}
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="panel-bar">
            <echart-bar v-if="isReload" class="panel-bar-item" :options="barOptions"/>
        </div> -->
  </div>
</template>
<script lang="ts">
import { Component, Vue, Model } from "vue-property-decorator";
import OAuthApi from "@/apis/oauth";
import env from "@/config/env";
import { utils } from "@cloudpivot/common";
import { Modal, Input, Select } from "@h3/antd-vue";
import EchartBar from "./bar.vue";
import Axios from "axios";
import { homeApi, userApi } from "@cloudpivot/api";

@Component({
  name: "charts-demo",
  components: {
    EchartBar,
  },
})
export default class Home extends Vue {
  homeData: any = {
    notice: [],
    bidding: 0,
    win: 0,
    finished: 0,
    unfinishedOrder: 0,
  };

  noPriceOrder: any = [];

  win: any = [];

  unSendOrder: any = [];

  noticeCurrent: number = 0;

  noticeHandle: any = [];

  noticeStatus: number = 0;

  isReload: boolean = true;

  // barOptions: Charts.BarOptions = {
  //     chartTitle: '月度合同金额统计',
  //     subTitle: '单位（万元）',
  //     x: [],
  //     y: [],
  //     // barColor: '#1890ff',
  //     color: ['#54A0F8'],
  // }

  clickPage(index: number) {
    alert(index);
  }

  beforeDestroy() {
    if (this.noticeHandle) {
      clearInterval(this.noticeHandle);
    }
  }

  reSetNoticeInterval() {
    if (this.noticeHandle) {
      clearInterval(this.noticeHandle);
    }
    this.noticeCurrent = 0;
    let that = this;
    this.noticeHandle = setInterval(function () {
      that.noticeStatus = 1;
      try {
        setTimeout(() => {
          that.noticeCurrent =
            (that.noticeCurrent + 1) % that.homeData.notice.length;
        }, 200);
      } catch {}
      try {
        setTimeout(() => {
          that.noticeStatus = 0;
        }, 500);
      } catch {}
      try {
        setTimeout(() => {
          that.noticeStatus = 2;
        }, 4500);
      } catch {}
    }, 5000);
  }

  reload() {
    this.isReload = false;
    this.$nextTick(function () {
      this.isReload = true;
    });
  }

  jumpUrl(url) {
    window.location = url;
  }

  jumpList(dataList) {
    this.$router.push({ name: "appListZC", query: { dataList: dataList } });
  }

  async created() {
    let user: any = window.sessionStorage.getItem("user");
    if (user) {
      user = JSON.parse(user);
    } else {
      user = { id: "", name: "" };
    }
    var userinfo: any = await userApi.getUserInfo(user.id);

    let that = this;

    await Axios.get(
      "/api/zcxtHomePage/getXiaoXi?type=1&userId=" +
        user.id
    ).then((res: any) => {
      if (res.errcode != "0") {
        alert("获取通知失败");
      } else if (res.errmsg == "无数据") {
        alert("通知无数据");
      } else {
        that.homeData.notice = [];
        for (var item in res.data) {
          that.homeData.notice.push({ name: res.data[item].biaoti });
        }
        that.reSetNoticeInterval();
      }
    });

    await Axios.get(
      "/api/zcxtHomePage/getDataCollectForMobile?userId=" +
        user.id
    ).then((res: any) => {
      if (res.errcode != "0") {
        alert("获取数量信息失败");
      } else if (res.errmsg == "无数据") {
        alert("数量信息无数据");
      } else {
        that.homeData.bidding = res.data.zhaobiao;
        that.homeData.win = res.data.zhongbiao;
        that.homeData.finished = res.data.finishedHt;
        that.homeData.unfinishedOrder = res.data.daifahuodingdan;
      }
    });
    await Axios.get(
      "/api/zcxtHomePage/getZhaoBiaoXinXi?type=3&userId=" +
        user.id
    ).then((res: any) => {
      debugger;
      if (res.errcode != "0") {
        alert("获取招标失败");
      } else if (res.errmsg == "无数据") {
        alert("招标无数据");
      } else {
        that.noPriceOrder = [];
        for (var item in res.data.liebiao) {
          that.noPriceOrder.push({
            id: item,
            name: res.data.liebiao[item].XMName,
            dt: res.data.liebiao[item].createdTime,
            url: res.data.liebiao[item].url,
          });
        }
      }
    });
    await Axios.get(
      "/api/zcxtHomePage/getZhongBiaoXinXi?result=中标&type=3&userId=" +
        user.id
    ).then((res: any) => {
      debugger;
      if (res.errcode != "0") {
        alert("获取中标失败");
      } else if (res.errmsg == "无数据") {
        alert("中标无数据");
      } else {
        that.win = [];
        for (var item in res.data.liebiao) {
          that.win.push({
            id: item,
            name: res.data.liebiao[item].XMName,
            dt: res.data.liebiao[item].createdTime,
            url: res.data.liebiao[item].url,
          });
        }
      }
    });
    await Axios.get(
      "/api/zcxtHomePage/getDaiFaHuoDingDan?type=3&userId=" +
        user.id
    ).then((res: any) => {
      debugger;
      if (res.errcode != "0") {
        alert("获取待发货订单失败");
      } else if (res.errmsg == "无数据") {
        alert("待发货订单无数据");
      } else {
        that.unSendOrder = [];
        for (var item in res.data.liebiao) {
          that.unSendOrder.push({
            id: item,
            name: res.data.liebiao[item].materialName,
            dt: res.data.liebiao[item].deliveryDate,
            url: res.data.liebiao[item].url,
          });
        }
      }
    });
  }
}
</script>

<style lang="less" scoped>
.panel {
  width: 100vw;
  height: calc(100vh - 50px);
  overflow: auto;
  background-color: #f7f7fa;
  padding-bottom: 50px;

  .panel-logo {
    width: 100%;
    height: 160px;
    background: url("./banner.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .panel-notice {
    margin: 5px 5px 0;
    width: calc(100vw - 10px);
    border-top: 2px solid rgba(161, 218, 255, 1);
    border-radius: 5px 5px 0 0;
    padding: 4px 10px 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    height: 36px;
    overflow: hidden;

    .panel-notice-left {
      padding: 3px 7px;
      font-size: 12px;

      .panel-notice-left-icon {
        width: 14px;
        height: 14px;
        margin-right: 2px;
      }
    }
    .panel-notice-more {
      width: 14px;
      height: 14px;
    }
  }

  .panel-info {
    margin: 5px 5px 0;
    width: calc(100vw - 10px);
    height: auto;
    border-top: 2px solid rgba(161, 218, 255, 1);
    padding: 0px 20px;
    background-color: #fff;
    border-radius: 5px 5px 0 0;

    .panel-info-title {
      padding: 5px 0;
      font-size: 16px;
      font-weight: 700;
      text-align: left;
      color: #000;
    }

    .panel-info-content {
      display: flex;
      justify-content: flex-start;
      align-content: flex-start;
      flex-wrap: wrap;
      text-align: left;
      padding: 0;

      .panel-info-content-itemFullFirstLine {
        width: 100%;
        color: #AAA;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 3px 0 5px;

        .panel-info-content-itemFullFirstLine-name {
          padding: 0 6px;
          width: 55%;
        }
        .panel-info-content-itemFullFirstLine-value {
          padding: 0 6px;
          width: 45%;
        }
      }

      .panel-info-content-itemFullLine {
        width: 100%;
        color: #222;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 6px 0 7px;
        .panel-info-content-itemFullLine-name {
          padding: 0 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 55%;
        }
        .panel-info-content-itemFullLine-value {
          padding: 0 10px;
          width: 45%;
        }
      }

      .panel-info-content-item {
        padding: 5px 0;
        width: 50%;

        .panel-info-content-item-name {
          font-size: 14px;
          padding-bottom: 2px;
          color: rgba(102, 102, 102, 1);
        }
        .panel-info-content-item-value {
          font-size: 23px;
          font-weight: 700;
          color: rgba(51, 51, 51, 1);
        }
      }
    }
  }

  .panel-bar {
    background-color: #fff;
    padding: 0 20px;
    .panel-bar-item {
      width: 100%;
      height: 300px;
    }
  }
  .panel-footer {
    background-color: #fff;
    width: 100vw;
    height: 49px;
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    .panel-footer-item {
      width: 33.3%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      .panel-footer-item-icon {
        width: 20px;
        height: 20px;
        margin-bottom: 2px;
      }

      .panel-footer-item-text {
        color: #7f7f7f;
        font-size: 11px;
      }
    }

    .panel-footer-item-current {
      .panel-footer-item-text {
        color: #4683eb;
      }
    }
  }
}

@keyframes noticeNextAction {
  0% {
    transform: rotateX(0);
  }

  100% {
    transform: rotateX(90deg);
  }
}

@keyframes noticePrevAction {
  0% {
    transform: rotateX(90deg);
  }

  100% {
    transform: rotateX(0);
  }
}
.noticePrev {
  animation: noticePrevAction 0.5s linear;
}

.noticeNext {
  animation: noticeNextAction 0.5s linear;
}
</style>